<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../asserts/plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
    <script src="../asserts/plugins/jquery-3.6.0.min.js"></script>
    <script src="../asserts/plugins/bootstrap/js/bootstrap.js"></script>
    <style>
        #commodityList{
            border: 1px solid rgb(133,133,133);
            padding: 10px 0;
        }
        li{
            display: inline-block;
            margin: 0px;
            list-style: none;
            width: 375px;
            height: 450px;
            /*border: solid 1px blue;*/
        }
    </style>
    <script>
        $(function () {
            // 当前页
            let currentPage = 1;
            // 每页几条数据
            let len = 9;
            //通用：上一页、下一页、跳转指定页
            $("#next_btn").click(function () {
                currentPage += 1;
                len = $("input[name=len]").val();
                getCommoditys()
            });
            $("#prior_btn").click(function () {
                currentPage -= 1;
                len = $("input[name=len]").val();
                getCommoditys()
            })
            $("#goPage_btn").click(function () {
                currentPage = $("input[name=goPage]").val();
                len = $("input[name=len]").val();
                getCommoditys()
            })

            // 获取展示所有商品
            function getCommoditys(){
                let $ul = $("#commodityList").text("");
                $.ajax({
                    url:'/KunKunMarket/CommodityController',
                    type:'get',
                    dataType:"json",
                    data:{
                        type: 'getCommodityPageList',
                        currentPage: currentPage,
                        len:len
                    },
                    success:function (respBean) {
                        if (respBean.status == 500){
                            alert(respBean.msg);
                            return;
                        }
                        currentPage = respBean.data.currentPage;
                        $("#currentPage").text(currentPage);
                        for (let i=0; i<respBean.data.data.length; i++){
                            //console.log(respBean.data.data[i]);
                            let $li = $("<li><a href='commodityDetailed.html?id=" +respBean.data.data[i].id+ "'></a><p></p><p></p><p></p><p></p><p></p><p></p></li>");
                            let img_url = respBean.data.data[i].img_url;
                            let img = $("<img src=''>");
                            img.attr('src', img_url);
                            img.attr("style", "height: 330px;width:280px;");
                            $li[0].childNodes[0].appendChild(img[0]);

                            $li[0].childNodes[1].innerText = respBean.data.data[i].id;
                            $li[0].childNodes[1].style="display:none";
                            $li[0].childNodes[2].innerText = respBean.data.data[i].name;
                            $li[0].childNodes[3].innerText = respBean.data.data[i].stock;
                            $li[0].childNodes[3].style="display:none";
                            $li[0].childNodes[4].innerText = respBean.data.data[i].price;
                            $li[0].childNodes[5].innerText = respBean.data.data[i].user_id;
                            $li[0].childNodes[5].style="display:none";
                            $li[0].childNodes[6].innerHTML = '<button class="addOrder_btn" >购买</button>';
                            $ul.append($li);
                            $li.attr("style", "padding:0 45px");
                        }
                        $(".addOrder_btn").click(addOrder_btn);
                    }
                })
            }
            getCommoditys();
            //购买商品，生成订单
            function addOrder_btn(){
                let flag = confirm("确认购买吗？");
                if (flag){
                    //获取到商品id
                    let $li = $(this).parents("li");
                    let id = $li.find("p")[1].innerText;
                    console.log(id);
                    $.ajax({
                        url:"/KunKunMarket/OrderController",
                        type:"get",
                        dataType:"json",
                        data:{
                            type:"addOrder",
                            commodity_id:id
                        },
                        success:function (respBean) {
                            alert(respBean.msg);
                            if (respBean.status == 200){
                                alert("购买成功");
                            }
                        }
                    })
                }
            }

            //判断是否卖家
            $.ajax({
                url: "/KunKunMarket/UserController?type=getMyData",
                type:"get",
                dataType: "json",
                success:function (respBean) {
                    if (respBean.status == 500){
                        alert(respBean.msg);
                        return;
                    }
                    if (respBean.data.user_type == 1){
                        // 是卖家，显示 ”我的店铺“ 超链接
                        $("#myCommodity").attr('style','display: inline-block');
                    }
                }
            })

        })
    </script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <a href="../user/userIndex.html" class="btn btn-primary btn-sm">个人资料</a>
                <a href="../user/order.html" class="btn btn-primary btn-sm">我的订单</a>
                <a href="#" class="btn btn-primary btn-sm">我的购物车</a>
                <a href="../user/myCommodityList.html" style="display: none" id="myCommodity" class="btn btn-primary btn-sm">我的店铺</a>
            </div>
            <div class="col-md-6" style="text-align: right">

                <button id="prior_btn" class="btn btn-default btn-sm">上一页</button>
                <span id="currentPage"></span>
                <button id="next_btn" class="btn btn-default btn-sm">下一页</button>
                <button id="goPage_btn" class="btn btn-default btn-sm">跳转到</button>


                <input type="number" name="goPage" value="1" style="display: inline-block;width: 50px;margin-right: 10px">

                每页 <input type="number" name="len" value="9" style="display: inline-block;width: 50px"> 条数据

            </div>
        </div>




        <ul id="commodityList">
            <li>商品展示</li>
            <li>商品展示</li>
            <li>商品展示</li>
            <li>商品展示</li>
        </ul>

    </div>
</body>
</html>